<template>
  <div class="app-container">
    <el-card class="box-card" shadow="hover" v-if="isNotBlack(formCreateInfo.formCustomCreatePath) || isNotBlack(formCreateInfo.rule)">
      <div slot="header" class="clearfix">
        <span>任务表单</span>
      </div>
      <el-col :span="20" :offset="2">
        <template v-if="formCreateInfo.formType === 0">
          <form-create v-model="fApi" :rule="formCreateInfo.rule" :option="formCreateInfo.option" :value.sync="formCreateInfo.value"></form-create>
        </template>
        <template v-if="formCreateInfo.formType === 1">
          <dynamic-component :uri="formCreateInfo.formCustomCreatePath" :form-data="formCreateInfo.value"></dynamic-component>
        </template>
      </el-col>
    </el-card>
    <el-card class="box-card" shadow="hover" style="margin-top: 30px">
      <div slot="header" class="clearfix">
        <span>审批流程</span>
      </div>
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form ref="approvalForm" :model="taskApprovalForm.flowData" :rules="rules" label-width="120px">
            <el-form-item label="审批意见" prop="comment">
              <el-input type="textarea" :rows="5" v-model="taskApprovalForm.flowData.comment" placeholder="请输入 审批意见" />
            </el-form-item>
            <el-form-item label="指定审批人" prop="assignee">
              <el-input placeholder="审批人员" v-model="taskApprovalForm.flowData.assigneeName">
                <template slot="append"><el-button @click="userAssigneeSelect">审批人员</el-button></template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="10" type="flex" justify="center" >
        <el-col :span="1.5">
          <el-button icon="el-icon-circle-check" type="success" @click="handleComplete">通过</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button icon="el-icon-chat-line-square" type="primary" @click="handleDelegate">委派</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button icon="el-icon-thumb" type="success" @click="handleTransfer">转办</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button icon="el-icon-refresh-left" type="warning" @click="handleReturn">退回</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button icon="el-icon-circle-close" type="danger" @click="handleReject">拒绝</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- tagSelect弹框 -->
    <tag-select-dialog :title="userListTitle" v-if="userListOpen"
                       :list-select-show="userListOpen"
                       :select-path="userListPath"
                       @getListValue="getUserListValue">
    </tag-select-dialog>


    <!-- 添加或修改流程表单对话框 -->
    <el-dialog title="节点选择" :visible.sync="defineNodeDialog" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="defineRules" label-width="80px">
        <el-form-item label="表单名称" prop="formName">
          <el-select v-model="form.targetId" placeholder="请选择">
            <el-option
              v-for="item in defineNodeList"
              :key="item.nodeId"
              :label="item.nodeName"
              :value="item.nodeId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {delegate, transfer,getNodeList,freeFlowTask} from "@/api/flowable/bpmTask";
import TagSelectDialog from "@/components/tagSelectDialog/tagSelectDialog.vue";
import {addBpmForm, updateBpmForm} from "@/api/flowable/bpmForm";
import DynamicComponent from "@/components/DynamicComponent/dynamicComponent.vue";

export default {
  name: "approval",
  components: {DynamicComponent, TagSelectDialog},
  data() {
    return {
      fApi: {},
      rules: {
        comment: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
      },
      defineRules:{
        targetId: [{ required: true, message: '请选择节点', trigger: 'blur' }],
      },
      userListPath:'flowable/bpmProcessDetail/tagselect',
      //是否加载tagSelect弹框
      userListOpen:false,
      userListTitle:"审批人员选择",
      //操作类型
      operationType:'complete',
      //流程定义节点列表
      defineNodeList:[],
      defineNodeDialog:false,
      form:{
        targetId:null
      }
    };
  },
  props:{
    taskApprovalForm:{
      type:Object,
      require:true
    },
    //流程表单信息
    formCreateInfo:{
      type:Object,
      require:true
    },
    //流程表单信息
    taskId:{
      type:String,
      require:true,
      default:""
    },
  },
  methods: {

    userAssigneeSelect(){
      this.operationType = 'complete';
      this.userListOpen = true;
    },

    handleComplete(){
      this.$refs["approvalForm"].validate(valid => {
        if (valid) {
          this.$emit('complete');
        }
      })

    },

    handleDelegate(){
      this.operationType = 'delegate';
      this.userListOpen = true;

    },

    handleTransfer(){
      this.operationType = 'transfer';
      this.userListOpen = true;
    },

    handleReturn(){
      getNodeList({taskId:this.taskId}).then(res=>{
        this.defineNodeList = res.data
        this.defineNodeDialog = true;
      })
    },

    handleReject(){
      this.$refs["approvalForm"].validate(valid => {
        if (valid) {
          this.$emit('reject');
        }
      })
    },
    getUserListValue(val) {
      if (this.operationType === 'complete') {
        this.$emit('selectApprover', val)
        this.userListOpen = false;
      } else if (this.operationType === 'delegate') {
        if (val && val.length > 0) {
          delegate({taskId: this.taskId, assigneeUserId: val[0].userId}).then(() => {
            this.userListOpen = false;
            this.$message.success("委派成功")
          })
        }
      } else if (this.operationType === 'transfer') {
        if (val && val.length > 0) {
          transfer({taskId: this.taskId, assigneeUserId: val[0].userId}).then(() => {
            this.userListOpen = false;
            this.$message.success("转办成功")
          })
        }
      }

    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          freeFlowTask({taskId: this.taskId, targetActivityId: this.form.targetId}).then(() => {
              this.$message.success("处理成功")
              this.$router.push({path: '/bpm/bpmTask'})
            }
          )
        }
      });
    },
    cancel(){
      this.form.targetId = null;
      this.defineNodeDialog = false;
    },

    isNotBlack(obj) {
      if (obj === null || obj === undefined) {
        return false;
      }

      if (typeof obj === 'string') {
        return obj.trim() !== '';
      }

      if (obj.hasOwnProperty('length')) {
        return obj.length > 0;
      }

      return true;
    }


  }
};
</script>
